<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link rel="icon" type="image/svg+xml" href="/static/svg/favicon-11202e26.svg"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>探测器和电缆智能诊断系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body,
        #app {
            width: 100%;
            height: 100%;
            font-size: 0.12rem;
            font-family: SourceHanSansCN-Normal, SourceHanSansCN;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <input id="file" type="file" @change="fileChange" value="" />
    <div style="color: red;">{{ message }}</div> <br />
    <div style="color: red;">{{ message2 }}</div> <br />
  </div>
</body>
<script>
  const app = new Vue({
    el: '#app',
    data() {
      return {
        message: '',
        message2: '',
      }
    },
    methods: {
      fileChange(e) {
        this.message = JSON.stringify(e)
      }
    },
    mounted() {
      const dom = document.getElementById('file')
      dom.onchange = e => {
        this.message2 = JSON.stringify(e);
      }
    }
  })
</script>
</html>
